

<template>
<div class="agreementDetails">
  <navBar :title='title' :titleColor='titleColor' :backVisible='backVisible' :homePath='homePath' :visibleLeft='visibleLeft'></navBar>
  <div class="agreementDetailsBox">

      <div class="agreementDetailsBoxCenter">
          <div class="agreementDetailsBoxList">
              <p class="clearfix agreementDetailsBoxLisTop"><span class="fl agreementDetailsBoxLisTopTIT">服务A预约</span><span class="fr plus">+1000</span></p>
              <p class="clearfix agreementDetailsBoxListBottom"><span class="fl">08-02 14:55</span><span class="fr">余额1000人次</span></p>
          </div>
          <div class="agreementDetailsBoxList">
              <p class="clearfix agreementDetailsBoxLisTop"><span class="fl agreementDetailsBoxLisTopTIT">服务A预约</span><span class="fr Less">-1000</span></p>
              <p class="clearfix agreementDetailsBoxListBottom"><span class="fl">08-02 14:55</span><span class="fr">余额1000人次</span></p>
          </div>
           <div class="agreementDetailsBoxList">
              <p class="clearfix agreementDetailsBoxLisTop"><span class="fl agreementDetailsBoxLisTopTIT">服务A预约</span><span class="fr Less">-1000</span></p>
              <p class="clearfix agreementDetailsBoxListBottom"><span class="fl">08-02 14:55</span><span class="fr">余额1000人次</span></p>
          </div>
           <div class="agreementDetailsBoxList">
              <p class="clearfix agreementDetailsBoxLisTop"><span class="fl agreementDetailsBoxLisTopTIT">服务A预约</span><span class="fr Less">-1000</span></p>
              <p class="clearfix agreementDetailsBoxListBottom"><span class="fl">08-02 14:55</span><span class="fr">余额1000人次</span></p>
          </div>
           <div class="agreementDetailsBoxList">
              <p class="clearfix agreementDetailsBoxLisTop"><span class="fl agreementDetailsBoxLisTopTIT">服务A预约</span><span class="fr Less">-1000</span></p>
              <p class="clearfix agreementDetailsBoxListBottom"><span class="fl">08-02 14:55</span><span class="fr">余额1000人次</span></p>
          </div>
           <div class="agreementDetailsBoxList">
              <p class="clearfix agreementDetailsBoxLisTop"><span class="fl agreementDetailsBoxLisTopTIT">服务A预约</span><span class="fr Less">-1000</span></p>
              <p class="clearfix agreementDetailsBoxListBottom"><span class="fl">08-02 14:55</span><span class="fr">余额1000人次</span></p>
          </div>

           <div class="agreementDetailsBoxList">
              <p class="clearfix agreementDetailsBoxLisTop"><span class="fl agreementDetailsBoxLisTopTIT">服务A预约</span><span class="fr Less">-1000</span></p>
              <p class="clearfix agreementDetailsBoxListBottom"><span class="fl">08-02 14:55</span><span class="fr">余额1000人次</span></p>
          </div>
           <div class="agreementDetailsBoxList">
              <p class="clearfix agreementDetailsBoxLisTop"><span class="fl agreementDetailsBoxLisTopTIT">服务A预约</span><span class="fr Less">-1000</span></p>
              <p class="clearfix agreementDetailsBoxListBottom"><span class="fl">08-02 14:55</span><span class="fr">余额1000人次</span></p>
          </div>
           <div class="agreementDetailsBoxList">
              <p class="clearfix agreementDetailsBoxLisTop"><span class="fl agreementDetailsBoxLisTopTIT">服务A预约</span><span class="fr Less">-1000</span></p>
              <p class="clearfix agreementDetailsBoxListBottom"><span class="fl">08-02 14:55</span><span class="fr">余额1000人次</span></p>
          </div>
           <div class="agreementDetailsBoxList">
              <p class="clearfix agreementDetailsBoxLisTop"><span class="fl agreementDetailsBoxLisTopTIT">服务A预约</span><span class="fr Less">-1000</span></p>
              <p class="clearfix agreementDetailsBoxListBottom"><span class="fl">08-02 14:55</span><span class="fr">余额1000人次</span></p>
          </div>
           <div class="agreementDetailsBoxList">
              <p class="clearfix agreementDetailsBoxLisTop"><span class="fl agreementDetailsBoxLisTopTIT">服务A预约</span><span class="fr Less">-1000</span></p>
              <p class="clearfix agreementDetailsBoxListBottom"><span class="fl">08-02 14:55</span><span class="fr">余额1000人次</span></p>
          </div>
           <div class="agreementDetailsBoxList">
              <p class="clearfix agreementDetailsBoxLisTop"><span class="fl agreementDetailsBoxLisTopTIT">服务A预约</span><span class="fr Less">-1000</span></p>
              <p class="clearfix agreementDetailsBoxListBottom"><span class="fl">08-02 14:55</span><span class="fr">余额1000人次</span></p>
          </div>
      </div>
  </div>
</div>
</template>

<script>
import navBar from "@/components/navBar/index"
export default {    
  components:{
    navBar
  },   
  data(){
    return{
      title:'协议详情',
      // 标题颜色
      titleColor: {
        default: "#FFFFFF"
      },
      backVisible:true,
      homePath:true,
      visibleLeft:true,
    }
  },

  methods: {

  },
  onReachBottom () {
    console.log('触底了')
  }
}
</script>

<style scoped>
.agreementDetails{
  width: 100%;
  min-height:100vh;
  background: #fff;
}
.agreementDetailsBox{
  width: 100%;
  padding:15px;
  box-sizing: border-box;
}
.agreementDetailsBoxCenter{
  width: 100%;
}
.agreementDetailsBoxList{
  padding: 15px 0px;
  height:70px;
  width: 100%;
  border-bottom: 1px solid #EBEBEB;
  box-sizing: border-box;
}
.agreementDetailsBoxLisTop{
margin-bottom: 6px;
}
.agreementDetailsBoxLisTopTIT{
  font-size:15px;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(51,51,51,1);
}
.plus{
  font-size:16px;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
color:rgba(51,51,51,1);
}
.Less{
  font-size:16px;
  font-family:PingFangSC-Medium,PingFang SC;
  font-weight:500;
  color:rgba(247,62,80,1);
}
.agreementDetailsBoxListBottom{
  font-size:12px;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(179,179,179,1);
}
</style>
